<template>
    <div class="row">
        <div class="col-sm-3">
            <div class="pre-scrollable" style="min-height: 800px;">
                <div class="">
                    <input type="text" class="form-control" placeholder="输入关键字搜索" v-model="search_key" />
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item" v-for="api in filterApi" :key="api.api_id">
                        <router-link class="nav-link" activeClass="active"
                                     v-bind:to="'/project/'+project_id+'/api/'+api.api_id">
                            {{api.api_id}}.{{api.api_name}}
                        </router-link>
                    </li>
                </ul>
            </div>

        </div>
        <div class="col-sm-9">
            <router-view name="api" :project_id="project_id" :api_id="api_id"></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        // props: ['project_id'],
        data() {
            return {
                api_list: [],
                search_key: ''
            }
        },
        watch: {
            '$route'() {
                this.getApi();
            }
        },
        created: function () {
            this.getApi();
        },
        computed: {
            project_id: function () {
                return this.$route.params.project_id;
            },
            api_id: function () {
                return this.$route.params.api_id;
            },
            filterApi: function () {
                return this.api_list.filter(this.searchApi);
            },
        },
        methods: {
            handleGetApi: function (response) {
                this.api_list = [];
                let api_list = response.data.data;
                for (let i in api_list) {
                    this.api_list.push({
                        api_id: api_list[i].api_id,
                        api_name: api_list[i].api_name,
                        path: api_list[i].path,
                    })
                }
            },
            getApi: function () {
                axios({
                    method: 'get',
                    url: '/api/api?project_id=' + this.project_id,
                }).then(this.handleGetApi)
            },
            searchApi: function (v) {
                if ('' === this.search_key) return true;
                return (v.api_id.toString().toLowerCase().indexOf(this.search_key) > -1 ||
                    v.api_name.toLowerCase().indexOf(this.search_key) > -1 ||
                    v.path.toLowerCase().indexOf(this.search_key) > -1
                );
            }
        }
    }
</script>

<style scoped>

</style>